
<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:全屏播放页面
@author:成都市一颗优雅草科技有限公司     
@version V3.7 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->

<template>
	<view>
		<video class="video" id="video" :autoplay="true" :src="src" danmu-btn controls :title="title" :enable-play-gesture="true"
		 enable-danmu :danmu-list="danmuList" :initial-time="initialTime" @error="videoErrorCallback" @fullscreenchange="onFullScreen"></video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: "",
				title: "",
				duration: 0,
				initialTime: 0,
				id: 0,
				danmuList: [],
				page: 1,
				i: 1
			}
		},
		onReady() {
			this.videoCtx = uni.createVideoContext("video", this)
			this.videoCtx.seek(this.initialTime);
			this.videoCtx.requestFullScreen();
			this.videoCtx.play();
			this.getDanmu()
		},
		onLoad(e) {
			if (e.src != undefined) {
				this.src = decodeURIComponent(e.src);
			}
			if (e.title != undefined) {
				this.title = e.title;
			}
			if (e.initialTime != undefined) {
				this.initialTime = e.initialTime;
			}
			if (e.id != undefined) {
				this.id = e.id;
			}
		},
		created() {
			// console.log('全屏');
		},
		onUnload() {
			this.videoCtx.stop();
		},
		methods: {
			onFullScreen(event) {
				if (!event.detail.fullScreen) {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			videoErrorCallback(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: () => {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			getDanmu() {
				this.$api.commentList({
					vid: this.id,
					page: this.page
				}).then((res) => {
					console.log(res.data);
					if (res.data.code == 0) {
						for (let item of res.data.data) {
							this.sendDanmu({
								text: item.content,
								color: this.getRandomColor()
							}, this.i);
							this.i += 3;
						}
						if (res.data.data.length > 0) {
							this.getDanmu();
						}

					}
				})
				this.page++;
			},
			sendDanmu(data, i) {
				setTimeout(() => {
					this.videoCtx.sendDanmu(data);
				}, i * 700 + Math.random() * 1000)
			}
		}
	}
</script>

<style>
	.video {
		width: 100vw;
		height: 100vh;
	}
</style>
